<template>
  <div class="similar-list">
    <div class="similar-list-item" v-for="(item,index) in simiList" v-if="index < showed" v-show="index <= unfoldLen" ref="simiList" :class="{ 'linear': unfoldLen == 1 && simiList.length > 1 && index == 1 }">
      <similar-item :similarStock="item" :isShare="isShare"></similar-item>
      <div class="linear-box"  v-show="unfoldLen == 1 && simiList.length>1&&index==1">
        <div class="layer-linear"></div>
        <div class="unfold">
          <span>更多 <i class="iconfont icon-xiangxia"></i></span>
        </div>
      </div>
    </div>
    <div class="packup" v-show="unfoldLen >1">
      <div v-if="showLoading" class="loading">加载中......</div>
      <template v-else>
        <div class="color-gray" v-if="simiList.length <= 5">已为您展示全部相似股票</div>
        <div class="color-gray" v-else>以上为您精选5只最相似的个股</div>
        <!--<div>收起 <i class="iconfont icon-xiangshang"></i></div>-->
      </template>
    </div>
    <div class="to-top" v-show="showTop" @click.stop="toTop"><!--相似k线超过4条后显示-->
      <!--<i class="iconfont icon-xiangshang"></i>-->
    </div>
  </div>
</template>

<script>
  import SimilarItem from './SimilarItem'
//  const TDAPP = window.TDAPP
  export default {
    name: 'similarList',
    data () {
      return {
        unfoldLen: 5, //  展现的相似曲线数量，默认1
        showTop: false, //  默认不显示
        showLoading: false, // 是否显示加载中文字
        showed: 5 // 表示第一次进入页面时要展示几条，之后表示已经展示过最大几条
      }
    },
    props: {
      simiList: {
        type: Array
      },
      similarNum: {
        type: Number
      },
      stock: {
        type: String
      },
      isShare: {
        type: Boolean
      }
    },
    components: {
      SimilarItem
    },
    mounted () {
      window.addEventListener('scroll', this.judgeshow)
    },
    beforeDestroy () {
      window.removeEventListener('scroll', this.judgeshow)
    },
    methods: {
//      unfold () { // 点击查看全部
//        this.unfoldLen = this.simiList.length
//        // 点击展开将unfoldLen设置为实际的相似线的长度
//        if (this.showed === 2) {
//          this.showed = 10
//        }
//        this.unfoldLen = this.simiList.length
//        let tdId = ''
//        if (this.isShare) {
//          tdId = '004023'
//        } else {
//          tdId = '004009'
//        }
//        TDAPP.onEvent(tdId, '', {userCode: '', stockCode: this.stock})
//        TDAPP.send()
//      },
//      packup () { // 点击收起
//        this.unfoldLen = 1 // 重新将unfoldLen设置为2默认
//        this.toTop()
//        let tdId = ''
//        if (this.isShare) {
//          tdId = '004024'
//        } else {
//          tdId = '004010'
//        }
//        TDAPP.onEvent(tdId, '', {userCode: '', stockCode: this.stock})
//        TDAPP.send()
//      },
      toTop () {
        this.$nextTick(() => {
          let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
          // 平滑滚动，时长500ms，每10ms一跳，共50跳
          let step = distance / 50
          smoothUp()
          function smoothUp () {
            if (distance > 0) {
              distance -= step
              document.body.scrollTop = distance
              document.documentElement.scrollTop = distance
              setTimeout(smoothUp, 5)
            } else {
              document.body.scrollTop = 0
              document.documentElement.scrollTop = 0
            }
          }
        })
      },
      judgeshow () {
        if (this.$refs.simiList[4] && this.unfoldLen > 1 && this.$refs.simiList[4].getBoundingClientRect().top < document.documentElement.clientHeight) {
          this.showTop = true
        } else {
          this.showTop = false
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .similar-list {
    position: relative;
    width: 100%;
    background: #fff;
    margin-top: -1px;
  }

  .similar-list-item.linear {
    width: 100%;
    height: 130px;
    overflow: hidden;
    position: relative;
    .linear-box {
      width: 100%;
      position: absolute;
      top: 10px;
      bottom: 0;
      left: 0;
      right: 0;
      .layer-linear {
        width: 100%;
        height: 72px;
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
      }
      .unfold {
        width: 100%;
        height: 58px;
        color: #309fea;
        background: #ffffff;
        span {
          font-size: 28px;
          line-height: 28px;
          i {
            font-size: 25px;
            font-weight: bolder;
            margin-left: 12px;
          }
        }
      }
    }
  }
  .packup {
    width: 100%;
    height: 100px;
    color: #309fea;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    i {
      font-size: 25px;
      font-weight: bolder;
      margin-left: 12px;
    }
    /*> div:first-child {*/
      /*padding: 20px 0 5px*/
    /*}*/
    /*> div:last-child {*/
      /*padding: 5px 0 20px*/
    /*}*/
    /*.loading {*/
      /*padding: 20px 0 !important;*/
    /*}*/
  }
  .to-top {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    color: #999999;
    position: fixed;
    bottom: 200px;
    right: 5%;
    background-image: url('~assets/images/totop.png');
    background-repeat: no-repeat;
    background-size: cover;
    /*background: RGBA(255, 255, 255, 0.8);*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*-webkit-box-shadow: 0 0 12px 0 RGBA(137, 137, 137, 0.4);*/
    /*-moz-box-shadow: 0 0 12px 0 RGBA(137, 137, 137, 0.4);*/
    /*box-shadow: 0 0 12px 0 RGBA(137, 137, 137, 0.4);*/
    /*i {*/
      /*font-size: 50px;*/
      /*font-weight: bolder;*/
    /*}*/
  }
</style>
